<template>
    <el-dialog ref="dialogform" :title="title" :visible.sync="dialogVisible" width="90%" :before-close="handleClose">
        <div class="flex">
            <div class="table">
                <span class="label">已分配功能列表</span>
                <div class="tableContent">
                    <el-table :default-expand-all="true" ref="multipleTable11" border :data="tableData1"
                        tooltip-effect="dark" style="width: 100%" max-height="400px">
                        <el-table-column type="expand" label="展开">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <div class="flex" @click.stop="chooseItem1({ deviceTypeFuncId: id })"
                                        v-for="id, index in  props.row.deviceTypeFuncList " :key="index">
                                        <div class="checkbox">
                                            <div
                                                :class="isChooseItem({ deviceTypeFuncId: id }, chooseItemList1, 'deviceTypeFuncId') ? 'active' : ''">
                                            </div>
                                        </div><span>{{ getFunsName(id).funcName }}</span>
                                    </div>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column prop="deviceTypeName" label="类型名称">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="btn">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm1">删除已选功能</el-button>
                </div>
            </div>
            <div class="table">
                <span class="label">所有功能列表</span>
                <div class="tableContent">
                    <el-table ref="multipleTable2" border :data="tableData2" tooltip-effect="dark" style="width: 100%"
                        max-height="400px">
                        <el-table-column type="expand" label="展开">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <div class="flex" @click.stop="chooseItem2({ deviceTypeFuncId: item.deviceTypeFuncId })"
                                        v-for="item, index in  props.row.deviceTypeFuncList " :key="index">
                                        <div class="checkbox">
                                            <div
                                                :class="isChooseItem({ deviceTypeFuncId: item.deviceTypeFuncId }, chooseItemList2, 'deviceTypeFuncId') ? 'active' : ''">
                                            </div>
                                        </div><span>{{ getFunsName(item.deviceTypeFuncId).funcName }}</span>
                                    </div>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column prop="deviceTypeName" label="类型名称">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="btn">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm2">分配已选功能</el-button>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
        </span>
    </el-dialog>
</template>
<script>

import deviceTypeFunc from "@/api/deviceTypeFunc";
import webUser from "@/api/webUser";
export default {
    components: {},
    props: {
        addEditFlag: {
            type: String,
            default: () => {
                return 'add'
            }
        },
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        title: {
            type: String,
            default: () => {
                return '功能分配'
            }
        },
        funsList: {
            type: Array,
            default: () => {
                return []
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        }
    },
    data () {
        return {
            tableData1: [],
            tableData2: [],
            chooseItemList1: [],
            chooseItemList2: [],
        }
    },
    computed: {},
    watch: {
        dialogVisible (v) {
            v && this.initData()
        }
    },
    computed: {},
    mounted () {
        this.initData()
    },
    methods: {
        initData () {
            this.queryTypeFuncListByUserId();
            this.queryListAndFunc();
        },
        async queryTypeFuncListByUserId () {
            this.chooseItemList2 = [];
            let res = await deviceTypeFunc.queryTypeFuncListByUserId(this.data.userId);
            this.tableData1 = res.data || [];
            let list = [];
            this.tableData1.forEach(item => {
                list = list.concat(item.deviceTypeFuncList);
            });
            list.forEach(id => {
                this.chooseItemList2.push({ 'deviceTypeFuncId': id })
            })
            console.log(list, this.chooseItemList2)
        },
        async queryListAndFunc () {
            let res = await deviceTypeFunc.queryListAndFunc();
            this.tableData2 = res.data || [];
        },

        getFunsName (id) {
            return this.funsList.find(item => item.deviceTypeFuncId == id)
        },
        chooseItem2 (item) {
            if (this.isChooseItem(item, this.chooseItemList2, 'deviceTypeFuncId')) {
                this.chooseItemList2 = this.chooseItemList2.filter(obj => obj.deviceTypeFuncId !== item.deviceTypeFuncId)
            } else {
                this.chooseItemList2.push(item);
            }
        },
        chooseItem1 (item) {
            if (this.isChooseItem(item, this.chooseItemList1, 'deviceTypeFuncId')) {
                this.chooseItemList1 = this.chooseItemList1.filter(obj => obj.deviceTypeFuncId !== item.deviceTypeFuncId)
            } else {
                this.chooseItemList1.push(item);
            }
            console.log(this.chooseItemList1)
        },
        isChooseItem (item, array, key) {
            return array.some(obj => obj[key] === item[key])
        },
        //rows默认选择的项目
        toggleSelection (rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable1.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable1.clearSelection();
            }
        },
        //分配已选功能
        async submitForm2 () {
            let deviceTypeFuncIdList = this.chooseItemList2.map(obj => obj.deviceTypeFuncId);
            let params = {
                userId: this.data.userId,
                deviceTypeFuncIdList
            }
            await webUser.addFilesToUser(params);
            this.queryTypeFuncListByUserId()
        },
        //删除已选功能
        async submitForm1 () {
            let idList = this.chooseItemList1.map(obj => obj.deviceTypeFuncId);
            console.log(idList)
            let deviceTypeFuncIdList = [];
            this.tableData1.forEach(item => {
                console.log(this.removeDuplicatesById(item.deviceTypeFuncList, idList, 'deviceTypeFuncIdList'))
                deviceTypeFuncIdList = deviceTypeFuncIdList.concat(this.removeDuplicatesById(item.deviceTypeFuncList, idList))
            })
            let params = {
                userId: this.data.userId,
                deviceTypeFuncIdList: deviceTypeFuncIdList
            }
            await webUser.addFilesToUser(params);
            this.queryTypeFuncListByUserId();
            this.chooseItemList1 = [];
        },
        removeDuplicatesById (arr1, array2) {
            return arr1.filter(item => !array2.includes(item));
        },
        //重置
        resetForm () {
            this.ruleForm = {};
            this.$refs.ruleForm && this.$refs.ruleForm.resetFields()
        },
        //取消关闭
        cancel () {
            this.resetForm()
            this.$emit("closeDialog")
        },
        handleClose (done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.resetForm(); this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped>
.line {
    border-bottom: 1px solid #e6e6e6;
}

.icon {
    font-size: 20px;
    line-height: 29px;
    cursor: pointer;
}

::v-deep .noLabel {
    .el-form-item {
        .label {
            display: none;
        }

        .el-form-item__content {
            margin: 0;
        }
    }
}

.flex {
    display: flex;
    justify-content: space-between;
}

.btn {
    padding-top: 10px;
}

.table {
    padding: 10px;
    background: #f1f1f1;
    width: calc(50% - 5px);

    .label {
        display: inline-block;
        padding-bottom: 10px;
        font-size: 16px;
        font-weight: bold;
    }
}

.tableContent {
    height: 400px;
}

.flex {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    line-height: 30px;
}

.checkbox {
    width: 15px;
    height: 15px;
    padding: 3px;
    margin-right: 10px;
    border: 1px solid #cecece;
    background: #ffffff;

    .active {
        width: 100%;
        height: 100%;
        background: #00a5f1;
    }
}
</style>
  